<template>
  <div class="layout-padding">
    <!--    页面布局 -->
    <splitpanes>
      <pane size="30">

        <div class="layout-padding-auto layout-padding-view">
          <el-row>
            <div class="mb8" style="width: 100%">
              <el-button icon="plus" type="primary"  sclass="ml10" @click="codeItemRef.openDialog()">
                {{$t('operation.add')}}
              </el-button>
            </div>
          </el-row>
          <el-table
              ref="tableRef"
              highlight-current-row
              :data="state.dataList"
              :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
              row-key="uuid"
              style="width: 100%"
              v-loading="state.loading"
              border
              :header-cell-style="tableStyle?.headerCellStyle"
              @row-click="clickRow"
          >
            <el-table-column prop="text" :label="$t('label.name')"/>
            <el-table-column :label="$t('common.action')" show-overflow-tooltip width="250" align="center">
              <template #default="scope">
                <el-button icon="plus" @click="onOpenAdd( scope.row)"    type="primary">
                </el-button>
                <el-button icon="edit" @click="onOpenEdit( scope.row)" type="primary">
                </el-button>
                <el-tooltip icon="delete" :content="$t('sysmenu.deleteDisabledTip')"
                            :disabled="!deleteMenuDisabled(scope.row)" placement="top">
							  <span style="margin-left: 12px">
								  <el-button
                      icon="delete"
                      :disabled="deleteMenuDisabled(scope.row)"
                      @click="handleDelete(scope.row)"
                      type="danger">
								  </el-button>
							  </span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </pane>
      <pane size="70">
        <splitpanes horizontal>
          <pane size="40">
            <div class="layout-padding-auto layout-padding-view">
              <archive ref="archiveRef" @click-h-row="clickHRow"/>
            </div>
          </pane>
          <pane size="60">
            <div class="layout-padding-auto layout-padding-view">
              <file ref="fileRef" />
            </div>
          </pane>
        </splitpanes>
      </pane>
    </splitpanes>
    <codeItemForm ref="codeItemRef" @refresh="getDataList(false)"/>
  </div>
</template>

<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import {getListByPid,delObjs} from "/@/api/platform/mes/codeItem";
import {useMessage, useMessageBox} from "/@/hooks/message";
import {useI18n} from "vue-i18n";

const codeItemForm = defineAsyncComponent(() => import('./codeItemForm.vue'));
const codeItemRef = ref();
const {t} = useI18n();

import archive from "/src/views/mes/sop/archive/index.vue";
import file from "/src/views/mes/sop/sysFile/index.vue";
const archiveRef = ref();
const fileRef = ref();


const state: BasicTableProps = reactive<BasicTableProps>({
  pageList: getListByPid, // H
  queryForm: {},
  isPage: false,
});

const clickRow = (row: any) => {
  archiveRef.value.query(row)
}

const clickHRow = (row: any) => {
  fileRef.value.query(row)
}

const {getDataList, tableStyle} = useTable(state);

// 打开新增菜单弹窗
const onOpenAdd = (row?: any) => {
  codeItemRef.value.openDialog(null, row.id);
};

const onOpenEdit = ( row?: any) => {
  codeItemRef.value.openDialog(row.id, null);
};

//是否禁用删除
const deleteMenuDisabled = (row: any) => {
  return (row.child || []).length > 0;
};

// 删除操作
const handleDelete = async (row: any) => {
  try {
    await useMessageBox().confirm(t('common.delConfirmText'));
  } catch {
    return;
  }

  try {
    await delObjs(row.uuid);
    getDataList();
    useMessage().success(t('common.delSuccessText'));
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};



</script>